<template>
  <div class="Header">
    <el-row>
      <el-col :span="4">
        <div class="grid-content">
          logo
        </div>
      </el-col>
      <el-col :span="4" :offset="6">
        <div class="grid-content">
          <el-input
                  size="small"
                  placeholder="请输入内容"
                  v-model="input"
                  clearable>
          </el-input>
        </div>
      </el-col>
      <el-col :span="9" :offset="1">
        <div class="grid-content">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">指导</el-menu-item>
            <el-submenu index="2">
              <template slot="title">我的工作台</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>
            <el-menu-item index="3">消息中心</el-menu-item>
            <el-menu-item index="4">关于</el-menu-item>
          </el-menu>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "Header",
    data() {
      return {
        input: '',
        activeIndex: '1',
        activeIndex2: '1'
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style scoped>
  .grid-content {
    min-height: 60px;
  }
</style>
